<template>
  <div class="dayShipment">
              <div class="title">
                  <div>
<!--                      <img class="title-img" src="../../assets/images/log.png">-->
                  </div>
                  <div class="title-font">江苏（如皋）如高高压电器有限公司管理板</div>
                  <div class="title-time">{{nowTime}}</div>
              </div>
              <div class="div-title" >精 益 制 造   精 致 生 活</div>
              <div class="imgBox leftFloat">
                  <img class="baseImg" src="../../assets/images/dayShipment.png" alt="" />

              </div>
              <div id="main" style="width: 97%;height:700px;"></div>

          </div>
      </template>

      <script>
          import * as echarts from 'echarts';
          export default {
              data() {
                  return {
                      nowTime:"",
                  }
              },

              created() {
                  //this.getInventoryBalanceData();
                  //this.start();
                  this.showTimes();
              },
              methods:{

                  // 显示当前时间
                  timeFormate(timeStamp) {
                      let year = new Date(timeStamp).getFullYear();
                      let month =
                          new Date(timeStamp).getMonth() + 1 < 10
                              ? "0" + (new Date(timeStamp).getMonth() + 1)
                              : new Date(timeStamp).getMonth() + 1;
                      let date =
                          new Date(timeStamp).getDate() < 10
                              ? "0" + new Date(timeStamp).getDate()
                              : new Date(timeStamp).getDate();
                      let hh =
                          new Date(timeStamp).getHours() < 10
                              ? "0" + new Date(timeStamp).getHours()
                              : new Date(timeStamp).getHours();
                      let mm =
                          new Date(timeStamp).getMinutes() < 10
                              ? "0" + new Date(timeStamp).getMinutes()
                              : new Date(timeStamp).getMinutes();
                      let ss =
                          new Date(timeStamp).getSeconds() < 10
                              ? "0" + new Date(timeStamp).getSeconds()
                              : new Date(timeStamp).getSeconds();
                      let nowTime= year + "-" + month + "-" + date +" " + hh + ":" + mm + ":" + ss;
                      return nowTime;

                  },
                  showTimes() {
                      this.timerTwo = setInterval(()=>{
                          this.nowTime = this.timeFormate(new Date())
                      }, 1000);
                  },
              },
              mounted() {
                  var chartDom = document.getElementById('main');
                  var myChart = echarts.init(chartDom);
                  var option;

                  option = {
                      color: [
                          "#00ca69",
                          "#0090FF",
                          "#FFC005",
                          "#FF515A",
                      ],
                      title: {
                          left: '3%',
                          text: '每日发货单量',
                          textStyle:{
                              color:"#fff"
                          }
                      },
                      tooltip: {
                          trigger: 'axis',
                      },
                      legend: {
                          data: ['配套库发货量', '配套库收货量', '成品库发货量', '成品库收货量'],
                          textStyle:{
                              color:"#fff",
                              fontSize: 20,
                          },

                      },
                      grid: {
                          left: '4%',
                          right: '4%',
                          bottom: '3%',
                          containLabel: true
                      },
                      toolbox: {
                          feature: {
                              saveAsImage: { show: true, type: ["line", "bar"] },
                          },
                      },
                      xAxis: {
                          type: 'category',
                          boundaryGap: false,
                          data: ['2021-08-03', '2021-08-04', '2021-08-05', '2021-08-06', '2021-08-07', '2021-08-08', '2021-08-09'
                              , '2021-08-10', '2021-08-11', '2021-08-12', '2021-08-13', '2021-08-14', '2021-08-15'],
                          axisLine: {
                              lineStyle: {
                                  color: "#fff",
                              }
                          },
                          axisLabel: {
                              textStyle: {
                                  fontSize: "16",
                              },
                          },

                      },
                      yAxis: {
                          type: 'value',
                          axisLine: {
                              lineStyle: {
                                  color: "#fff",
                              }
                          },
                          axisLabel: {
                              textStyle: {
                                  fontSize: "16",
                              },
                          },

                      },
                      series: [
                          {
                              name: '配套库发货量',
                              type: 'line',
                              data: [120, 180, 301, 334, 360, 330, 340, 330, 400, 360, 300, 270],
                          },
                          {
                              name: '配套库收货量',
                              type: 'line',
                              data: [130, 280, 370, 334, 300, 340, 320, 360, 340, 200, 290, 700]
                          },
                          {
                              name: '成品库发货量',
                              type: 'line',
                              data: [260, 330, 400, 370, 400, 350, 330, 370, 200, 100, 200, 250]
                          },
                          {
                              name: '成品库收货量',
                              type: 'line',
                              data: [320, 230, 190, 170, 160, 140, 180, 220, 270, 300, 350, 380]
                          }
                      ]
                  };

                  option && myChart.setOption(option);
              }
          }

      </script>


      <style>
          .div-title{
              width: 100vw;
              text-align: center;
              color: white;
              position: absolute;
              font-size: 30px;
              padding-top: 89px;
              z-index: 99;
          }
          .title{
              height: 70px;
              width: 100%;
              background-color: black;
              position: fixed;
          }
          .title-font{
              text-align: center;
              font-size: 40px;
              color: white;
              height: 70px;
              line-height: 70px;
          }
          .title-img{
              position: fixed;
              width: 300px;
              margin-top: 10px;
          }
          .title-time{
              float: right;
              margin-right: 30px;
              color: white;
              margin-top: -40px;
              font-size: 24px;
          }
          .imgBox {
              width: 100%;
              height: 100%;
              margin-top: 70px;
          }
          .baseImg {
              background-size: 100% 100%;
              height: 100vh;
              position: fixed;
              width: 100vw;
          }


          #main{
              padding-top: 200px;
              width: 100%;
          }
      </style>


